<template>
  <div id="app">
    <!-- loading页 -->
    <div class="splashScreen_wrap" :class="{ splashScreen: show }">
      <van-image
        width="100vw"
        height="100vh"
        fit="cover"
        v-if="ad.splashScreenLink"
        :src="ad.splashScreenLink.link"
        @click="handleTo"
      />
      <div class="count_wrap" @click="handleJump">跳过{{ ad.splashScreenWaitSecond }}</div>
    </div>
    <audio :controls="false" id="myAudio" ref="myAudio" loop>
      <source
        v-if="basic.bgMusicLink"
        :src="basic.bgMusicLink"
        type="audio/mp3"
      />
    </audio>
    <!-- 业务页面 -->
    <div
      id="appWrapper"
      class="app-wrapper"
      :style="{
        opacity: show ? 1 : 0,
      }"
    >
      <div class="notice_bar_wrap" v-if="notice.enabled">
        <van-notice-bar
          left-icon="volume-o"
          color="#fff"
          background="rgba(0,0,0,.3)"
          scrollable
          :text="notice.context"
        />
      </div>
      <div class="app-main">
        <!-- <transition :name="transitionName">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <transition :name="transitionName">
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition> -->

        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>

        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
      <!-- <div class="bg-img" :style="{ backgroundColor: cfg.theme }"> -->
      <div class="bg-img" v-if="basic">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          v-if="basic.bgImageLink"
          :src="basic.bgImageLink"
        />
      </div>
      <ul class="floater" v-if="basic.floatImageLink">
        <li
          v-for="item in 9"
          :key="item"
          class="move_bottom"
          :style="{
            left: 300 * Math.random() + 'px',
            'animation-duration': 10 + 4 * Math.random() + 's',
            'animation-delay': 10 * Math.random() + 's',
          }"
        >
          <img
            style="width: 34px; transform: rotate(3deg)"
            :src="basic.floatImageLink"
            alt=""
          />
        </li>
      </ul>
      <div class="search-popup" v-if="showSearch">
        <van-overlay :show="showSearch">
          <div class="wrapper">
            <div
              class="header"
              :style="{ background: basic.theme || cfg.theme }"
            >
              搜索
            </div>
            <div class="content">
              <van-cell-group>
                <van-field
                  v-model="searchKey"
                  size="large"
                  border
                  left-icon="search"
                  placeholder="请输入编号、名称"
                />
              </van-cell-group>
            </div>
            <div class="footer">
              <div class="close" @click="closeSearch">关闭</div>
              <div
                class="search"
                :style="{ background: basic.theme || cfg.theme }"
                @click="Search"
              >
                搜索
              </div>
            </div>
            <div class="close-icon" @click="closeSearch">
              <van-icon name="close" />
            </div>
          </div>
        </van-overlay>
      </div>
      <TabBar v-show="hidshow" />
    </div>
  </div>
</template>

<script>
import TabBar from "@/components/Tabbar";
import { mapGetters } from "vuex";
import cfg from "@/config";
import { LgetItem } from "@/utils/storage";
// import axios from "axios";
export default {
  name: "App",
  components: {
    TabBar,
  },
  computed: {
    ...mapGetters("configs", {
      basic: "basic",
      notice: "notice",
      ad: "ad",
    }),
    ...mapGetters("status", {
      showSearch: "showSearch",
    }),
  },
  data() {
    return {
      transitionName: "slide-right",
      show: true,
      timer: null,
      cfg,
      searchKey: "",
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hidshow: true, //显示或者隐藏footer
    };
  },
  created() {
    console.log(LgetItem("voteId"));
    // this.$api('vote.report1')
    // 为给定 ID 的 user 创建请求
    // axios
    //   .get(`/vote/statistic/visit/report/${LgetItem("voteId")}`)
    //   .then(function (response) {
    //     console.log(response);
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
  },
  mounted() {
    document.addEventListener("DOMContentLoaded", function () {
      function audioAutoPlay() {
        var audio = document.getElementById("myAudio");
        audio.play();
        document.addEventListener(
          "WeixinJSBridgeReady",
          function () {
            audio.play();
          },
          false
        );
      }
      audioAutoPlay();
    });
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },
  methods: {
    handleTo() {
      console.log(this.ad);
      if (this.ad.splashScreenLink.targetLink) {
        // window.open(this.ad.splashScreenLink.targetLink)
        window.location.href = this.ad.splashScreenLink.targetLink;
      }
    },
    goTo() {
      this.$router.push({ path: "/home" });
    },
    handleJump() {
      this.show = true;
      clearInterval(this.timer);
      this.timer = null;
    },
    closeSearch() {
      this.$store.commit("status/SET_SHOWSEARCH", false);
    },
    Search() {
      if (this.searchKey) {
        this.$store.commit("status/SET_SHOWSEARCH", false);
        this.$store.commit("status/SET_SEARCHKEY", this.searchKey);
        this.$router.replace({
          path: "/vote",
        });
        this.searchKey = "";
      } else {
        this.$toast("请输入编号或名称");
      }
    },
  },
  watch: {
    $route(to, from) {
      // if (to.meta.touchNone && !isIos()) {
      //   document.documentElement.classList.add("touchNone");
      // } else {
      //   document.documentElement.classList.remove("touchNone");
      // }
      const toIndex = to.meta.navIndex;
      const fromIndex = from.meta.navIndex;
      this.transitionName = toIndex < fromIndex ? "slide-right" : "slide-left";
    },
    ad(val) {
      console.log(val);
      if (val.splashScreenEnabled && val.splashScreenLink.link) {
        this.show = false;
        this.timer = setInterval(() => {
          this.ad.splashScreenWaitSecond--;
          if (this.ad.splashScreenWaitSecond == 0) {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    showHeight() {
      console.log(this.docmHeight,this.showHeight)
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
    // basic(val) {
    //   if (val.bgMusicLink) {
    //     let audio = this.$refs.myAudio;
    //     audio.src = val.bgMusicLink;
    //     console.log(this);
    //     // this.audioFn();
    //     // document.addEventListener("WeixinJSBridgeReady",function () {
    //     //       console.log('WeixinJSBridgeReady')
    //     //       // audio.play();
    //     // });
    //     console.log(audio);
    //     // audio.play();
    //   }
    // },
  },
};
</script>

<style src="@/commons/css/reset.css"></style>
<style lang="scss" scoped>
#app {
  width: 100vw;
  font-family: PingFangSC-Regular;
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
  }
  .slide-left-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    position: absolute;
  }
  .slide-right-leave-to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.app-wrapper {
  position: relative;
  min-height: 100vh;
  .notice_bar_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    ::v-deep.van-notice-bar {
      height: 30px;
      font-size: 13px;
    }
  }
  .bg-img {
    position: fixed;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    background: #fff;
  }
}
.splashScreen {
  display: none;
  opacity: 0;
  transition: all 0.5s;
}
.splashScreen_wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999999;
  .count_wrap {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 55px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    color: #fff;
    z-index: 9999999;
    font-size: 14px;
  }
}
.floater {
  position: fixed;
  left: 0;
  z-index: 222;
  li {
    position: fixed;
    top: -2.66667rem;
    z-index: 999999999999;
  }
  .move_bottom {
    animation: movebottom 5s linear 1s infinite;
  }
}
@keyframes movebottom {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(120vh);
  }
}
.search-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 999999;
  .wrapper {
    width: calc(100vw - 40px);
    margin: calc(50vh -24px) auto;
    transform: translateY(-50%);
    background: #fff;
    position: relative;
    .header {
      font-size: 16px;
      color: #fff;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    .content {
      padding: 32px 10px;
      ::v-deep.van-hairline--top-bottom:after {
        border-width: 1px;
      }
    }

    .footer {
      display: flex;
      font-size: 14px;
      height: 45px;
      line-height: 45px;
      .close {
        width: 50%;
        text-align: center;
        background: #f0f0f0;
      }
      .search {
        width: 50%;
        text-align: center;
        color: #fff;
      }
    }
    .close-icon {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999999;
      top: calc(50vh - 60px);
      font-size: 34px;
      color: #fff;
    }
  }
}
</style>

